<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${product.title}"></title>
    <meta name="keywords" th:content="${product.seoKeyword}"/>
    <meta name="description" th:content="${product.seoDescription}"/>
    <link rel="icon" href="/static/favicon.png"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/animate.css">
    <link rel="stylesheet" href="/static/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/product.css">
</head>
<body ontouchstart="" data-ind="2">
<style>
    table {
        margin: 0px auto;
    }
</style>
<div th:replace="menu :: menu"></div>
<div class="mohead clearfix">
    <a class="logoBox" href="/" rel="noopener noreferrer">
        <img src="/logo.png"></a>
    <div class="menu">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<div class="maskout">
    <img src="/static/picture/close.png">
</div>
<div th:replace="m-menu :: m-menu"></div>

<div class="leg"></div>
<div class="k-box pro-class-nav-box wow fadeInUp_qs50" ms="ms">
    <div class="" id="navbar-box">
        <div class="section-box wrap clearfix">
            <a href="/" rel="noopener noreferrer" block="" class="home">
                <img src="/static/picture/home_icon.png">
            </a>
        </div>
    </div>
</div>
<div class="pro-info-box">
    <div class="wrap">
        <div class="left">
            <div class="bigImgBox">
                <img class="bigImg" th:src="${mainImage}" alt="">
            </div>
            <div class="swiper-box">
                <div class="prev_proImgSwiper btn"></div>
                <div class="swiper-container" id="proImgSwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide " th:each="pi: ${productImage}">
                            <img th:src="${pi.url}" alt="">
                        </div>

                    </div>
                </div>
                <div class="next_proImgSwiper btn"></div>
            </div>
        </div>
        <div class="right">
            <h3 class="proName" th:text="${product.title}">W-20S系列数显韦氏硬度计</h3>

            <div class="ydbox">
                <div class="title" th:utext="${product.description}">
                    W-20S系列数显韦氏硬度计铝合金韦氏硬度计(又称钳式硬度计)，是一种轻便的，可以现场快速测试铝合金硬度的仪器。测试迅速，简便，一卡即可，硬度值直接显示，符合中国有色标准YS/T420和美国标准ASTM
                    B647，是标准YS/T420推荐的两种仪器之一。
                </div>
                <div class="yd">
                </div>
            </div>
            <div class="control-box clearfix">
                <a th:href="'tencent://message/?uin=' + ${companyProfile.qq} + '&Site=在线QQ&Menu=yes'" rel="noopener noreferrer" class="btn rt-btn zx">获取产品报价</a>
                <a blick="" href="tel:400-835-6268" class="btn makePhone hoverbtn">
                    <div class="tp">
                        <div class="icon">
                            <img src="/static/picture/phone_03.png" class="nor">
                            <img src="/static/picture/phone_03_w.png" class="act" alt="">
                        </div>
                        <span class="te" th:text="${companyProfile.tel}"></span>
                    </div>
                    <div class="bt">拨打全国热线电话</div>
                </a>
                <a href="/download" block="" class="btn down hoverbtn" rel="noopener noreferrer">
                    <span>资料下载</span>
                    <div class="icon">
                        <img src="/static/picture/download.png" class="nor">
                        <img src="/static/picture/download_w.png" class="act" alt="">
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="out-box">
    <div class="maodian-box">
        <div class="wrap">
            <a href="#a2" block="">产品详情</a>
            <a href="#a5" block="">售后承诺</a>
            <a href="#a3" block="" th:if="${related != null && !related.isEmpty()}">相关产品</a>
        </div>
    </div>
</div>
<div class="pro-detail-box">
    <div class="pro-info-li">
        <a href="" class="maodian" id="a2"></a>
        <div class="this-title">产品详情</div>
        <div class="wrap imgcenter" th:utext="${product.content}">

        </div>
    </div>

    <div class="pro-info-li">
        <a href="" class="maodian" id="a5"></a>
        <div class="this-title">售后承诺</div>
        <div class="wrap">
            <ul class="clearfix service-ul">
                <li class="clearfix">
                    <div class="icon">
                        <img src="/static/picture/20200416150941_8141.png" alt="">
                    </div>
                    <div class="text-box">
                        <div class="tl">免费指导安装，保修1年</div>
                        <div class="te">
                            凡在本公司采购的产品，一律免费指导安装与产品培训；免费保修期为1年。
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="icon">
                        <img src="/static/picture/20200416150956_3791.png" alt="">
                    </div>
                    <div class="text-box">
                        <div class="tl">预约上门服务</div>
                        <div class="te">
                            问题报修后，先进行电话等线上方式指导，无法解决问题的，可预约技术人员到现场进行解决。
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="icon">
                        <img src="/static/picture/20200416151009_9802.png" alt="">
                    </div>
                    <div class="text-box">
                        <div class="tl">零保修费</div>
                        <div class="te">
                            由于机器自身缺陷造成的损坏，安全免费保修。人为问题造成的损坏，仅收取零部件成本。
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="icon">
                        <img src="/static/picture/20200416151025_8060.png" alt="">
                    </div>
                    <div class="text-box">
                        <div class="tl">零部件成本价替换</div>
                        <div class="te">
                            保修期过后，本公司继续提供维修服务，零部件一律按成本价替换。
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="pro-info-li" th:if="${related != null && !related.isEmpty()}">
        <a href="" class="maodian" id="a3"></a>
        <div class="this-title">相关产品</div>
        <div class="wrap">
            <div class="swiper-container case-ul" id="case">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" th:each="r: ${related}">
                        <a th:href="'/product_detail_' + ${r.id}" rel="noopener noreferrer">
                            <div class="imgbox">
                                <img th:src="${r.img}" alt="">
                            </div>
                            <div class="tl" th:text="${r.title}"> W-20S系列数显韦氏硬度计</div>
                        </a>
                    </div>

                </div>
                <div class="swiper-pagination" id="caseSP"></div>
            </div>
        </div>
    </div>
</div>
<div class="video_mask">
    <div class="videobox">
        <div class="top clearfix">
            <div class="close_btn">
                <i class="h"></i>
                <i class="s"></i>
            </div>
        </div>
        <!-- 在这里绑产品得视频 -->
        <video src="" controls=""></video>
    </div>
</div>

<div th:replace="footer :: footer"></div>

</body>
<script src="/static/js/swiper-3.4.2.min.js"></script>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script src="/static/js/wow.min.js"></script>
<script src="/static/js/common.js"></script>
<script type="text/javascript">
    $(function () {
        var proImgSwiper = creatSwiper("#proImgSwiper", {
            slidesPerView: 5,
            spaceBetween: "3%",
            breakpoints: {
                768: {
                    slidesPerView: 1
                }
            }
        })

        var caseSwiper = creatSwiper("#case", {
            slidesPerView: 3,
            spaceBetween: '1.78565%',
            breakpoints: {
                768: {
                    slidesPerView: 2,
                    spaceBetween: '5%'
                }
            }
        })
        var newsSwiper = creatSwiper("#news", {
            slidesPerView: 3,
            spaceBetween: '1.78565%',
            breakpoints: {
                768: {
                    slidesPerView: 2,
                    spaceBetween: '5%'
                }
            }
        })

        var serviceSwiper = creatSwiper("#service", {
            slidesPerView: 3,
            spaceBetween: '2.8571%',
            breakpoints: {
                768: {
                    slidesPerView: 2,
                    spaceBetween: '5%'
                }
            }
        })

        var hadVideo = $(".video_mask video").attr("src");
        if (hadVideo === '') {
            $(".bigImgBox .bfbtn").hide();
        }
        $("#proImgSwiper .swiper-slide img").on("click", function () {
            var src = $(this).attr("src");
            var par = $(this).parent();
            var ind = par.index();
            par.addClass("cur");
            par.siblings(".swiper-slide").removeClass("cur");
            $(".bigImgBox .bigImg").attr("src", src);
            onVideo = ind == 0;
            if (onVideo) {
                $(".bigImgBox").addClass("act");
            } else {
                $(".bigImgBox").removeClass("act");
            }
        })

        var md = $(".maodian");
        var wh = window.innerHeight;
        $(window).scroll(function (e) {
            var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var maodianTop = $(".out-box").offset().top;
            if (scrollDistance >= maodianTop) {
                $(".out-box ").addClass("fixed")
            } else {
                $(".out-box ").removeClass("fixed")
            }
            for (var i = 0; i < md.length; i++) {
                var mdTop = $(md[i]).offset().top;
                if (scrollDistance + wh * 0.5 > mdTop) {
                    $(".maodian-box a").eq(i).addClass("act").siblings().removeClass("act");
                }
            }
        })
    })
</script>

</html>